<template>
  <div class="imglist">
    <div class="img" v-for="img in imgList">
      <el-image style="width:300px" :key="img.id" :src="`http://localhost:9000/${img.name}`"></el-image>
      <el-button @click="delImg(img.id)" class="del" size="small" icon="el-icon-delete" circle></el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'index',
  components: {

  },
  mixins: [],
  props: {

  },
  data() {
    return {
      imgList: [],
    }
  },
  mounted() {
    this.getImage()
  },
  methods: {
    getImage() {
      this.$axios.get('/carousel/list').then(res => {
        if (res.data.code === 1) {
          this.imgList = res.data.list
        }
      })
    },
    delImg(imgId) {
      const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      this.$axios.post('carousel/backend/remove', { id: userInfo.id, imgId: imgId }).then(res => {
        if (res.data.code === 1) {
          this.$message(res.data.message)
          this.getImage()
        } else {
          this.$message(res.data.message)
        }
      })
    }
  }
};
</script>
<style scoped>
.uploadImg {
  margin: 24px;
}

.imglist {
  width: 100%;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 24px;
}

.img {
  position: relative;
}

.del {
  position: absolute;
  top: -10px;
  right: -10px;
}
</style>